<template>
  <div :id="boxId" :style="{height, width}"></div>
</template>
<script>
import { Chart } from '@antv/g2'
export default {
  props: {
    boxId: {
      type: String,
      default: 'container'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    },
    chartData: {
      type: Array,
      default: function() {
        return []
      }
    },
    legend: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData() {
      this.init()
    }
  },
  mounted() {
    this.chart = new Chart({
      container: this.boxId,
      autoFit: true,
      height: this.height,
      padding: [60, 10, 60, 30]
    })
    this.init()
  },
  methods: {
    init() {
      const that = this
      this.chart.theme({
        styleSheet: {
          paletteQualitative10: [
            '#2E55FF',
            '#009CFF',
            '#714BFF',
            '#BBBDE6',
            '#4045B2',
            '#21A97A',
            '#FF745A',
            '#007E99',
            '#FFA8A8',
            '#2391FF'
          ]
        }
      })
      this.chart.data(this.chartData)
      this.chart.coordinate('polar', {
        startAngle: Math.PI, // 起始角度
        endAngle: Math.PI * (3 / 2) // 结束角度
      })
      this.chart.scale('value', {
        tickCount: 6
      })
      this.chart.legend(this.legend)

      this.chart.axis('value', {
        grid: {
          line: {
            type: 'circle'
          },
          closed: false
        },
        verticalFactor: 1,
        label: {
          offset: 15
        }
      })
      this.chart.axis('type', {
        tickLine: {
          alignTick: false
        },
        grid: {
          alignTick: false
        }
      })
      this.chart.tooltip({
        showMarkers: false,
        containerTpl: `<div class="g2-tooltip"><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,
        itemTpl: `<li data-index={index} style="padding:12px;">
          <span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
          {name}: {exra}&emsp;({value}件)
          </li>`
      })
      // chart.interaction('element-highlight')
      this.chart
        .interval()
        .position('type*value')
        .color('type')
        // .label('value', {
        //   offset: -15,
        //   style: {
        //     textAlign: 'center',
        //     fill: '#000'
        //   }
        // })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        }).tooltip('type*value*point', (type, value, point) => {
          return {
            name: type,
            value: that.formatData(value),
            exra: point
          }
        })
      this.chart.render()
    },
    // 格式化数据信息
    formatData(num, tsNum = 10000, unit = 'w') {
      if (num < tsNum) return String(num).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
      if (num >= tsNum) {
        const _num = (num * 1 / 10000).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
        return `${_num}${unit}`
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.g2-tooltip{
  padding: 0px 14px 12px !important;
}
</style>
